<template>

  <div class="image_click" @click="imgClick()">
    <el-image :src="`${realSrc}`" fit="cover" :style="`width:${realWidth};height:${realHeight};`"
      :preview-src-list="realSrcList" @click="handlePreviewImg()">

      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
    <span class="imgShowNum" v-show="imgTrue">{{ imgNum }}</span>
  </div>
</template>

<script>
import { isExternal } from "@/utils/validate";
import axios from 'axios'
export default {
  name: "ImagePreview",
  props: {
    src: {
      type: String,
      default: ""
    },
    width: {
      type: [Number, String],
      default: ""
    },
    height: {
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {
      imgTrue: false,
      imgNum: 0
    }
  },
  created() {
  },
  mounted(){

  },
  methods: {
    imgClick() {
      this.imgTrue = true
      this.addImgNum()
    },
    async handlePreviewImg() {
      this.$nextTick(() => {
        let domImageView = document.querySelector(".el-image-viewer__mask"); // 获取遮罩层dom
        let closeEle = document.querySelector(".el-image-viewer__close"); // 获取遮罩层关闭按钮dom
        let nextBtn = document.querySelector(".el-image-viewer__next");
        let prevBtn = document.querySelector(".el-image-viewer__prev");

        if (!domImageView || !closeEle) {
          return;
        }
        domImageView.addEventListener("click", () => {
          this.imgTrue = false
        });
        closeEle.addEventListener("click", () => {
          this.imgTrue = false
        });
        nextBtn.addEventListener("click", () => {
          this.addImgNum()
        });
        prevBtn.addEventListener("click", () => {
          this.addImgNum()
        });
      });
    },
    addImgNum() {
      let imgInfo =  document.querySelector(".el-image-viewer__img")||document.querySelector(".el-image__preview"); // 获取图片信息
      let imgInfoUrl = imgInfo.getAttribute("src")
      let a = this.realSrcList.indexOf(imgInfoUrl) + 1
      let b = this.realSrcList.length
      this.imgNum = a + '/' + b
    }
  },
  beforeDestory() {

  },
  computed: {
    realSrc() {
      if (!this.src) {
        return;
      }
      let real_src = this.src.split(",")[0];
      if (isExternal(real_src)) {
        return real_src;
      }
      return axios.defaults.baseURL + real_src;
    },
    realSrcList() {
      if (!this.src) {
        return;
      }
      let real_src_list = this.src.split(",");
      let srcList = [];
      real_src_list.forEach(item => {
        if (isExternal(item)) {
          return srcList.push(item);
        }
        return srcList.push(axios.defaults.baseURL + item);
      });
      return srcList;
    },
    realWidth() {
      return typeof this.width == "string" ? this.width : `${this.width}px`;
    },
    realHeight() {
      return typeof this.height == "string" ? this.height : `${this.height}px`;
    }
  },
};
</script>

<style lang="scss" scoped>
.el-image {
  border-radius: 5px;
  background-color: #ebeef5;
  box-shadow: 0 0 5px 1px #ccc;

  ::v-deep .el-image__inner {
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      transform: scale(1.2);
    }
  }

  ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #909399;
    font-size: 30px;
  }
}

.imgShowNum {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  z-index: 9999;
  color: #fff;
  font-size: 3vw;
}
</style>
